<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-30 11:33:20
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-30 11:36:21
 * @FilePath: \vue-project\src\components\Vue3Echarts\BarGraph.vue
 * @Description: 可视化组件
 * 
-->
<template>
  <div class="echarts-box">
    <div ref="chartDom" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  width: {
    type: String,
    default: '500px'
  },
  height: {
    type: String,
    default: '500px'
  }
})
// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null)
let chartInstance = null

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(() => {
  chartInstance = echarts.init(chartDom.value)
  const option = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
      text: 'ECharts 示例图表'
    },
    tooltip: {},
    xAxis: {
      data: ['类别1', '类别2', '类别3', '类别4', '类别5']
    },
    yAxis: {},
    series: [
      {
        name: '数据系列',
        type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
        data: [120, 200, 150, 80, 70]
      }
    ]
  }
  chartInstance.setOption(option)
})

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose()
  }
})
</script>

<style lang="scss" scoped>
</style>